<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        实例内容
        <parent-com></parent-com>
    </div>
    <template id="ParentCom">
        <div>
            <h1>我是父组件---{{message}}</h1>
            <!-- <child-com @myevent="myfn" ></child-com> -->
            <ul>
                <child-com 
                v-for="(item,k) in users"
                 :item="item" 
                 :k="k"
                 @delfn="delfn"
                 ></child-com>
            </ul>
        </div>
    </template>
    <template id="ChildCom">
        <li>姓名是{{item.name}},年龄是{{item.age}}<button @click="deluser(k)">删除</button></li>
        <!-- <div> -->
            
            <!-- <h1>我是子组件</h1>
            <button @click="getParent">点击我传数据给父组件</button> -->
        <!-- </div> -->
    </template>
    <script>
        // 二、子传父 ： $emit(自定义事件)   ---->trigger(自定义事件)
        // 接收 自定义事件
        let ChildCom = {
            template:"#ChildCom",
            props:['item','k'],
            data:function(){
                return {
                    message:"子组件数据"
                }
            },
            methods:{
                getParent(){
                    console.log("执行了getParent");
                    this.$emit("myevent",this.message);
                },
                deluser(k){
                    // console.log(k);
                    this.$emit("delfn",k);
                }
            }
        }

        let ParentCom = {
            template:"#ParentCom",
            components:{
                ChildCom
            },
            data:function(){
                return {
                    message:"父组件数据",
                    users:[{
                        name:"张三",
                        age:20
                    },{
                        name:"李四",
                        age:22
                    },{
                        name:"王五",
                        age:21
                    }]
                }
            },
            methods:{
                myfn(arg){
                    // console.log(arg)
                    this.message = arg;
                },
                delfn(k){
                    // console.log("父级k",k);
                    this.users.splice(k,1);
                }
            }
        }

        // 组件的通信
        new Vue({
            el:"#app",
            components:{
                ParentCom
            },
            data:{
                message:"实例数据"
            }
        })
    </script>
</body>
</html>